<template>
  <LineRenderer :lines="lineList" />

  <TextRenderer :texts="textList" />
</template>

<script setup lang="ts">

import {
  reactive,
  ref,
  onMounted,
  computed,
  watch,
  getCurrentInstance,
} from "vue";


import LineRenderer from "./LineRenderer.vue";

import TextRenderer from "./TextRenderer.vue";


// 定义组件的 props
const props = defineProps({
    config: Object
});


const lineList = ref([
  // {
  //   y1: '0mm',
  //   x2: '0mm',
  //   y2: '251mm',
  //   style: {
  //     stroke: 'rgba(0,0,0,1)',
  //     strokeWidth: 2
  //   }
  // }
]);

const textList = ref([
  // {
  //     "x": "12mm",
  //     "y": "2.5mm",
  //     "style": {
  //         "fontFamily": "宋体",
  //         "fontSize": 12,
  //         "fontWeight": "500",
  //         "textDecoration": "",
  //         "textAnchor": "middle",
  //         "dominantBaseline": "central",
  //         "fontStyle": ""
  //     },
  //     "fillColor": "rgba(0,0,0,1)",
  //     "text": "日 期",
  //     "textStrNext": "",
  //     "isVertical": false,
  //     "cx": 24
  // },
]);


//解析体温表表格配置
const parseVitalLine = (props: any) => {
  let { config, keyToNumber, scale, unit } = props;

  let data = props.designData.vitalLines;

  scale = 1;
  unit = "mm";

  let linePenIdToStyle = config["linePenIdToStyle"] || {};


  console.log("linePenIdToStyle",linePenIdToStyle);
  

  let vitalLineSvg = [];
  data = data || [];

  // console.log("designData.vitalLines",data);
  

  for (let i = 0; i < data.length; i++) {
    let attr = data[i]["_attr"];

    

    let { left, right, top, bottom, direction, times, multiple } = attr;
    let penId = attr["pen-id"];
    let penStyle = linePenIdToStyle[penId] || {};
    let styleColor = penStyle["color"];
    let styleWidth = penStyle["pen-width"];
    let penSolid = penStyle["pen-style"];
    multiple = multiple || 1;
    if (keyToNumber) {
      // 将left, right, top, bottom 转换成数字
      left = parseStringToNumber(left, keyToNumber);
      right = parseStringToNumber(right, keyToNumber);
      top = parseStringToNumber(top, keyToNumber);
      bottom = parseStringToNumber(bottom, keyToNumber);
    }

    // 获取线段两点坐标点
    let x1 = left * scale + unit;
    let y1 = top * scale + unit;
    let x2 = right * scale + unit;
    let y2 = bottom * scale + unit;

    // 线段样式
    let style = {
      stroke: styleColor ? `rgba(${styleColor})` : "rgba(0,0,0,1)",
      strokeWidth: styleWidth,
      strokeDasharray: penSolid === 2 ? "3,3" : undefined,
    };

    // 单次线条
    if (!times) {
      // console.log("单次线条1");
      
      vitalLineSvg.push({ x1: x1, y1: y1, x2: x2, y2: y2, style: style });
    } else {
      if (direction === "x") {
        // 横向循环线条
        for (let j = 0; j < times; j++) {
          // x轴坐标累加
          let curLeft = (left - 0 + right * j * multiple) * scale + unit;
          
      // console.log("单次线条2");
          vitalLineSvg.push({
            x1: curLeft,
            y1: y1,
            x2: curLeft,
            y2: y2,
            style: style,
          });
        }
      }
      if (direction === "y") {
        //纵向循环线条
        for (let j = 0; j < times; j++) {
          // y轴坐标累加
          let curTop = (top - 0 + bottom * j * multiple) * scale + unit;
          
      // console.log("单次线条3");
          vitalLineSvg.push({
            x1: x1,
            y1: curTop,
            x2: x2,
            y2: curTop,
            style: style,
          });
        }
      }
    }
  }

  return vitalLineSvg;
};

//解析体温表文字配置
const parseVitalText = (props: any) => {
  let { config, keyToNumber, scale, unit } = props;

  let data = props.designData.vitalTexts;


  scale = 1;
  unit = "mm";

  let fontIdToStyle = config["fontIdToStyle"] || {};
  let vitalTextSvg = [];
  data = data || [];

  for (let i = 0; i < data.length; i++) {
    let attr = data[i]["_attr"];
    let {
      left,
      right,
      top,
      bottom,
      align,
      text,
      spans,
      multiple,
      direction,
      times,
      step,
      cy,
    } = attr;

    console.log("attr",attr);
    


    let fontId = attr["font-id"] || 1;
    let fontStyle = fontIdToStyle[fontId] || {};
    let fontName = fontStyle["font-name"];
    let fontSize = fontStyle["font-size"];
    let fontBold = fontStyle["font-bold"];
    let fontUnderline = fontStyle["font-underline"];
    let fontInital = fontStyle["font-inital"];
    let textColor = fontStyle["text-color"];
    let textStrNext = attr["str-next"] || "";
    let isVertical = align === "vertical";
    let attrScale = attr["scale"];

    if (keyToNumber) {
      // 将left, right, top, bottom 转换成数字
      left = parseStringToNumber(left, keyToNumber);
      right = parseStringToNumber(right, keyToNumber);
      top = parseStringToNumber(top, keyToNumber);
      bottom = parseStringToNumber(bottom, keyToNumber);
    }
    // 文字样式
    let style = {
      fontFamily: fontName,
      fontSize: fontSize,
      fontWeight: fontBold ? "600" : "500",
      textDecoration: fontUnderline ? "underline" : "",
      textAnchor: "middle",
      dominantBaseline: "central", // 居中
      fontStyle: fontInital ? "italic" : "", // 斜体
    };

    let fillColor = textColor ? `rgba(${textColor})` : "rgba(0,0,0,1)"; // 文字颜色

    let x = (left + right / 2) * scale + unit;
    let y = (top + bottom / 2) * scale + unit;

    if (!times) {
      vitalTextSvg.push({
        x,
        y,
        style,
        fillColor,
        text,
        textStrNext,
        isVertical,
        cy,
        cx: right,
        attrScale,
      });
    } else {
      if (direction === "x") {
        for (let j = 0; j < times; j++) {
          let curLeft =
            (left + spans * multiple * j + right / 2) * scale + unit;
          vitalTextSvg.push({
            x: curLeft,
            y,
            style,
            fillColor,
            text: step ? text + step * j : text,
            textStrNext,
            isVertical,
            cy,
            cx: right,
            attrScale,
          });
        }
      } else if (direction === "y") {
        for (let j = 0; j < times; j++) {
          let curTop =
            (top - 0 + bottom * j * multiple + bottom / 2) * scale + unit;
          vitalTextSvg.push({
            x: x,
            y: curTop,
            style,
            fillColor,
            text: step ? text + step * j : text,
            textStrNext,
            isVertical,
            cy,
            cx: right,
            attrScale,
          });
        }
      }
    }
  }

  return vitalTextSvg;
};


/**
 * 将文本bottom,left,right,top等转成数字，根据体温单xml配置
 * @param string
 * @param keyToNumber
 * @returns {number}
 */
 const parseStringToNumber = (string, keyToNumber) => {
  const newString = string
    ? string.toString().replace(/([^0-9]*)/, (k) => {
        return keyToNumber[k] === undefined ? k : keyToNumber[k];
      }) - 0
    : string;

    // console.log("parseStringToNumber", string,newString);
  return newString;
};


onMounted(() => {
  //console.log('3.-组件挂载到页面之后执行-------onMounted')

  

  let lineConfig = parseVitalLine(props.config);

  console.log("lineConfig",lineConfig);
  

  lineList.value = lineConfig;

  let textConfig = parseVitalText(props.config);

  
  console.log("parseVitalText", props.config);

  textList.value = textConfig;


});
</script>

<style lang="scss" scoped></style>
